<script>
import {loadPublicTeacher} from "@/api/index.js";
import {insertNewCourse} from "@/api/admin/crouse.js";
import {ElNotification} from "element-plus";

export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    flag:{
      get(){
        return this.modelValue
      },
      set(nv){
        this.$emit('update:modelValue',nv)
      }
    }
  },
  data(){
    return {
      option:[],
      params:{
        course_teacher_id:"",
        course_name:"",
        course_grade:"",
        course_time:"",
        course_location:"",
        course_credit:"",
        course_max_size:"",
        course_exam_date:"",
        course_exam_location:""
      },
      week:'',
      star:"",
      count:"",
    }
  },
  methods: {
    async initTeacherOptions(tname=""){
      let data = await loadPublicTeacher(tname)
      this.option=data
    },
    async addNewCourse(){
      this.params.course_time=this.week + "-" + this.star + "-" + this.count
      await insertNewCourse(this.params)
      ElNotification.success({
        title: `“${this.params.course_name}”添加成功`,
      })
      this.params = {
        course_teacher_id: '',
        course_name: '',
        course_grade: '',
        course_time: '',
        course_location: '',
        course_credit: '',
        course_max_size: '',
        course_exam_date: '',
        course_exam_location: '',
      }
      this.week = ''
      this.star = ''
      this.count = ''
      this.flag = false
      this.$emit('reset')
    }
  },
  created(){
    this.initTeacherOptions()
  }
}
</script>

<template>
  <el-dialog v-bind="$attrs" v-model="flag">
    <template #header>
     <span>新课程添加</span>
    </template>

    <el-form label-width="80px" :inline="false">
      <el-form-item label="课程年级">
        <el-input v-model="params.course_grade"></el-input>
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="params.course_name"></el-input>
      </el-form-item>
      <el-form-item label="课程学分">
        <el-input v-model="params.course_credit" type="number" placeholder="课程学分两位数"></el-input>
      </el-form-item>
      <el-form-item label="授课老师">
        <el-select placeholder="关键字搜索"
                   clearable
                   filterable
                   remote
                   :remote-method="initTeacherOptions"
                   v-model="params.course_teacher_id"
        >
          <el-option
            v-for="item in option"
            :key="item.teacher_id"
            :value="item.teacher_id"
            :label="item.count_text"

          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上课时间">
        <div class="item-row">
        <el-select v-model="week" clearable>
          <el-option label="星期日" value="0" disabled></el-option>
          <el-option label="星期一" value="1"></el-option>
          <el-option label="星期二" value="2"></el-option>
          <el-option label="星期三" value="3"></el-option>
          <el-option label="星期四" value="4"></el-option>
          <el-option label="星期五" value="5"></el-option>
          <el-option label="星期六" value="6" disabled></el-option>
        </el-select>
        <el-select v-model="star">
          <el-option v-for="(item,i) in 10" :label="`第${item}节`" :value="i"></el-option>
        </el-select>
        <el-select v-model="count">
          <el-option v-for="item in 4" :label="`共${item}节`" :value="item"></el-option>
        </el-select>
        </div>
      </el-form-item>
      <el-form-item label="上课地点">
        <el-input v-model="params.course_location"></el-input>
      </el-form-item>
      <el-form-item label="座位数">
        <el-input v-model="params.course_max_size" type="number"></el-input>
      </el-form-item>
      <el-form-item label="考试时间">
        <el-date-picker v-model="params.course_exam_date" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"></el-date-picker>
      </el-form-item>
      <el-form-item label="考试地点">
        <el-input v-model="params.course_exam_location"></el-input>
      </el-form-item>
    </el-form>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:modelValue',false)" >取消</el-button>
        <el-button type="primary" @click="addNewCourse()" >
         添加
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<style scoped>
.el-form{
  padding: 20px 40px;
}
.item-row{
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}
.item-row .el-select{
  flex-grow: 1;
}
:deep(.el-date-editor) {
  width: 100%;
}
</style>
